<template>
    <div class="dataClass" :class="'dataClass' + Math.random()" ref="container" @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave">
        <div class="dataTitle" :style="{ 'backgroundColor': backgroundColor }">
            <span class="titleName">{{ title }}</span>
            <div class="operation" v-if="isOpenSelect">
                <span class="btn" @click="multipleChoice">{{
                    isOpenMultipleChoiceBtn ? '关闭选择' : '选择'
                }}</span>
                <span class="btn" v-show="isOpenMultipleChoiceBtn" @click="selectAll">全选</span>
                <span class="btn" v-show="isOpenMultipleChoiceBtn && selectList.length > 0"
                    @click="cancelSelect()">取消</span>
                <span class="btn" v-show="isOpenMultipleChoiceBtn && selectList.length > 0" @click="delSelect">删除</span>
            </div>
        </div>
        <div class="dataList">
            <el-button class="button" size="small" plain v-for="item, index in data" :key="index"
                :type="configuredFlag == 'configured' ? 'primary' : ''" @click="addDataType(item, index)">{{ labelKey
                    ? item[labelKey] : item }}
                <div class="selectBtn" v-show="isOpenMultipleChoiceBtn && isOpenSelect">
                    <div v-if="selectIndexList.indexOf(index) !== -1" class="isActive"></div>
                </div>
            </el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        backgroundColor: {
            type: String,
            default: () => {
                return '#4381b5'
            }
        },
        isOpenSelect: {
            type: Boolean,
            default: () => {
                return true
            }
        },
        configuredFlag: {
            type: String,
            default: () => {
                return 'configured'
            }
        },
        data: {
            type: Array,
            default: () => {
                return []
            }
        },
        labelKey: {
            type: String,
            default: () => {
                return null
            }
        },
        title: {
            type: String,
            default: () => {
                return '数据类型'
            }
        },
    },
    data() {
        return {
            addEditName: '添加',
            addEditApi: '',
            selectList: [],
            selectIndexList: [],
            isOpenMultipleChoiceBtn: false
        }
    },
    
    mounted() {

    },
    methods: {
        handleMouseEnter() {
            document.body.removeEventListener('click', this.handleClickBody)
        },
        handleMouseLeave() {
            document.body.addEventListener('click', this.handleClickBody)
        },
        handleClickBody() {
            this.isOpenMultipleChoiceBtn = false;
            this.selectList = [];
            this.selectIndexList = [];
        },
        addDataType(data = {}, index) {
            if (!this.isOpenMultipleChoiceBtn) {
                this.$emit('addDataType', { ...data, configuredFlag: this.configuredFlag })
            } else {
                this.selectList.push(data);
                this.selectIndexList.push(index);
            }
        },
        //多选
        multipleChoice() {
            this.isOpenMultipleChoiceBtn = !this.isOpenMultipleChoiceBtn;
            this.selectList = [];
            this.selectIndexList = [];
        },
        //取消
        cancelSelect() {
            this.selectList = [];
            this.selectIndexList = [];
        },
        //全选
        selectAll() {
            this.selectIndexList = [];
            this.selectList = JSON.parse(JSON.stringify(this.data));
            this.selectList.forEach((item, index) => {
                this.selectIndexList.push(index)
            })
        },
        //删除选中
        delSelect() {
            this.$emit('delDataTypeData', this.selectList)
        },
    }

};
</script>
<style lang="scss" scoped>
.dataClass {
    width: 100%;
    height: 100%;
    border: 1px solid #4381b5;
    border-radius: 10px 10px 0 0;
    overflow: hidden;


    .dataTitle {
        background-color: #4381b5;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        font-size: 18px;
        position: relative;

        .titleName {
            font-weight: bold;
        }

        .operation {
            position: absolute;
            right: 20px;
            bottom: 0;
            line-height: 40px;
            color: #ffffff;
            font-size: 12px;
            cursor: pointer;

            .btn {
                margin: 0 5px;
                font-size: 12px;
            }
        }
    }

    .dataList {
        padding: 10px;
    }

    .button {
        font-size: 14px;
        padding: 10px 28px;
        margin: 6px 10px;
        position: relative;

        .selectBtn {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 20px;
            height: 20px;
            border: 1px solid #cecece;
            background-color: #ffffff;
            border-radius: 50%;
            padding: 2px;
        }

        .isActive {
            width: 100%;
            height: 100%;
            background: #4381b5;
            border-radius: 50%;
        }
    }
}
</style>
  